<template>
    <div id="wrap">
        <header>
            <a href="/show" class="headerback"><img src="/img/back.png"/></a>
            <div class="indexsearch">
                商品详情
            </div>

            <a href="/home" class="index">
                <img src="/img/goindex.png" />
            </a>
        </header>
        <app-sku
            v-show="isShowBase"
            @closeSku="closeSku"
            @updataNum="updataNum"
        ></app-sku>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
            <van-swipe-item
                v-for="(item, index) in dataList.bannerSrc"
                :key="index"
                ><img v-lazy="item"
            /></van-swipe-item>
        </van-swipe>

        <div id="goodsinfo_wrap">
            <!-- 商品信息 -->
            <div class="proinfowrap">
                <div class="propricewrap">
                    <span class="prokprice"
                        ><i>¥</i
                        ><em id="proprice">{{ dataList.sale_price }}</em></span
                    >
                    <span class="marketprice">{{ dataList.market_price }}</span>
                </div>
                <p>
                    {{ dataList.title }}
                </p>
            </div>
            <div class="salesReturn">
                服务
                <span> 正品保障 | 7天退换货<br /> </span>
            </div>

            <!-- 尺码 -->
            <div class="prodetailwrap">
                <p class="detailinfohd">
                    尺码
                </p>
                <div id="sizeinfo" class="detailinfobody clear_fix">
                    <ul>
                        <li
                            :style="{
                                color:
                                    sizes.flag[index] == 1
                                        ? activeColor
                                        : disableColor
                            }"
                            class="sizeitem"
                            :class="activeClass == index ? 'selected' : ''"
                            @click="selectSize(index)"
                            v-for="(item, index) in sizes.size"
                            :key="index"
                        >
                            {{ item }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 商品信息详情 -->
        <div class="probottomwrap">
            <!--切换tab start-->
            <div class="probottomtab">
                <div id="thumbinfo" class="tabinfo selected">图文详情</div>
                <div id="commentinfo" class="tabinfo">评价晒单(0)</div>
            </div>
            <!--图文内容 start-->
            <div class="detailabout">
                <table>
                    <tbody>
                        <tr
                            v-for="(item, index) in dataList.table"
                            :key="index"
                        >
                            <td width="30%">
                                {{ dataList.table[index].td[0] }}
                            </td>
                            <td>{{ dataList.table[index].td[1] }}</td>
                        </tr>
                    </tbody>
                </table>
                <img
                    v-for="(val, key) in dataList.goodsSrc"
                    :key="key"
                    :src="val"
                    alt=""
                />
            </div>
            <div class="emptyDiv"></div>
        </div>

        <!-- 底部导航 -->
        <div class="footerWrap">
            <div class="probottom-slide">
                <div class="flexslide">
                    <dl id="cart">
                        <dt class="cartthumb">
                            <i>{{ cartNum }}</i>
                        </dt>
                        <dd @click="goCart">购物车</dd>
                    </dl>
                </div>
                <div id="addcartbtn" class="addcart" @click="addCart">
                    加入购物车
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
header {
    display: flex;
    justify-content: space-between;
    background-color: #f5f5f5;
    position: fixed;
    top: 0;
    z-index: 1;

    .headerback img {
        width: v(40);
        height: v(50);
    }

    .indexsearch {
        width: v(286);
        height: v(50);
        text-align: center;
        line-height: v(50);
    }
    .index img {
        width: v(46);
        height: v(50);
    }
}

//轮播图样式

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    width: v(370);
    height: v(370);
    line-height: v(370);
    text-align: center;
    img {
        width: 100%;
        height: 100%;
    }
    border-bottom: 1px solid #ccc;
}

#goodsinfo_wrap {
    padding: 0 v(8);
}
//商品信息
.proinfowrap {
    height: v(100);
    padding: v(8) v(15) v(4) v(20);
    .propricewrap {
        margin-bottom: v(15);
        .prokprice {
            line-height: v(24);
            color: #d70057;
            margin-right: v(8);

            i {
                font-size: v(15);
                margin-right: v(5);
            }
            em {
                font-size: v(24);
            }
        }
        .marketprice {
            color: #c3c3c3;
            font-size: v(12);
            text-decoration: line-through;
        }
        .proname {
            font-size: v(15);
            line-height: v(17);
        }
    }
}
.salesReturn {
    font-size: v(15);
    padding: v(14) v(8);
    background: #fff;
    border-bottom: 1px solid #eee;
    span {
        margin-left: v(2);
        font-size: v(12);
    }
}
.prodetailwrap {
    padding: v(14) v(8);
    font-weight: bold;
    #sizeinfo {
        margin-top: v(20);
        .sizeitem {
            float: left;
            min-width: v(70);
            height: v(40);
            line-height: v(40);
            margin: 0 v(12) v(7) 0;
            text-align: center;
            position: relative;
            color: #ccc;
            font-size: v(12);
            background: #f4f4f4;
            border-radius: v(2);
        }
        .selected {
            background-color: #d70057;
            color: white !important;
        }
    }
}
.probottomwrap {
    border-top: 1px solid #eee;
    margin-top: v(10);
    .probottomtab {
        height: v(44);
        display: flex;
        line-height: v(44);
        #thumbinfo {
            width: v(176);
            text-align: center;
        }
        #commentinfo {
            width: v(199);
            text-align: center;
        }
    }
    .detailabout {
        padding: 0 v(8);
        table {
            width: 100%;
            height: v(370);
            color: #818181;
            td {
                border-bottom: 1px solid #e7e7e7;
            }
            margin-bottom: v(8);
        }
    }
    img {
        width: 100%;
        margin-bottom: 1px;
    }
    .emptyDiv {
        width: 100%;
        height: v(52);
    }
}
.footerWrap {
    width: 100%;
    height: v(50);
    position: fixed;
    left: 0;
    bottom: 0;
}
.probottom-slide {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.45rem;
}
.probottom-slide .flexslide {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    float: left;
    width: 25%;
    height: 2.45rem;
    line-height: 2.45rem;
    background: #fff;
    border-top: 1px solid #ccc;
}
.probottom-slide .flexslide dl {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    box-sizing: border-box;
    width: 100%;
    height: 2.45rem;
    padding-top: 0.2rem;
}
.probottom-slide .flexslide dl#cart {
    border-right: 1px solid #e8e8e8;
}
.probottom-slide .flexslide dl dt {
    width: 1.3rem;
    height: 1.1rem;
    margin: 0.1rem auto 0;
    position: relative;
}
.probottom-slide .flexslide dl dt i {
    display: block;
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.8rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.4rem;
    background-color: #d70057;
    color: #fff;
    font-size: 0.6rem;
    z-index: 3;
}
.probottom-slide .flexslide dl dd {
    -webkit-margin-start: 0;
    line-height: 0.9rem;
    text-align: center;
    color: #666;
    font-size: 0.55rem;
}
.probottom-slide .flexslide dl .cartthumb {
    background: url("http://0.touch.js.al.okbuycdn.com/resources/complete/images/product/cart.png")
        no-repeat;
    background-size: 100% 100%;
}
.probottom-slide .flexslide dl .likethumb {
    background: url("http://0.touch.js.al.okbuycdn.com/resources/complete/images/product/keep.png")
        no-repeat;
    background-size: 100% 100%;
}
.probottom-slide .addcart {
    float: left;
    width: 75%;
    height: 2.45rem;
    line-height: 2.45rem;
    text-align: center;
    background-color: #d70057;
    color: #fff;
    font-size: 0.75rem;
}
.probottom-slide .sellout {
    float: left;
    width: 50%;
    height: 2.45rem;
    line-height: 2.45rem;
    text-align: center;
    background-color: #666;
    color: #b7b7b7;
    font-size: 0.75rem;
}
.probottom-slide .beforeaddcart {
    background: #ffae00;
    text-align: center;
}
.probottom-slide .beforeaddcart img {
    margin-top: 0.5rem;
    width: 1.5rem;
}
</style>

<script>
import usersApi from "../api/userApi";
import { getUser } from "../utils/auth.js";
import appSku from "./Sku";
import { Toast } from "vant";
export default {
    data() {
        return {
            dataList: {},
            sizes: [],
            cartList: [],
            cartItem: {},
            cartNum: 0,
            userSize: null,
            activeColor: "#333333",
            disableColor: "#ccc",
            activeClass: -1,
            isShowBase: 0,
            sizeChecked: 0
        };
    },

    components: {
        appSku
    },

    methods: {
        goCart() {
            this.$router.push("/cart");
        },
        addCart() {
            if (this.sizeChecked) {
                if (!JSON.parse(localStorage.getItem("cart"))) {
                    this.cartList = [];
                } else {
                    this.cartList = JSON.parse(localStorage.getItem("cart"));
                }
                this.cartItem.sku = this.dataList.sku;
                this.cartItem.size = this.userSize;
                this.cartItem.price = this.dataList.sale_price;
                this.cartItem.num = 1;
                this.cartItem.src = this.dataList.listSrc;
                this.cartItem.title = this.dataList.title;
                this.cartItem.isCheck = false;
                this.cartItem.goodinfo = this.dataList;
                this.cartList.forEach((item, index) => {
                    if (
                        item.sku == this.cartItem.sku &&
                        item.size == this.cartItem.size
                    ) {
                        item.num = item.num == undefined ? 1 : item.num + 1;
                        return false;
                    }
                });
                let isPush = this.cartList.some((item, index) => {
                    return (
                        item.sku == this.cartItem.sku &&
                        item.size == this.cartItem.size
                    );
                });
                if (!isPush) {
                    this.cartList.unshift(this.cartItem);
                }

                // 发请求，存购物车
                usersApi
                    .getuser({ username: getUser() })
                    .then(res => {
                        if (res.data.code) {
                            // console.log(res.data.data[0]._id);
                            // 拿到用户_id,发送请求 修改用户信息
                            usersApi
                                .editCart(res.data.data[0]._id, this.cartList)
                                .then(res => {
                                    // 轻提示
                                })
                                .catch(err => {
                                    console.log("出错了" + err);
                                });
                        }
                    })
                    .catch(err => {
                        console.log("出错了" + err);
                    });
                localStorage.setItem("cart", JSON.stringify(this.cartList));
                let numSum = 0;
                this.cartList.forEach(item => {
                    numSum += item.num;
                });
                this.cartNum = numSum;
                Toast("添加成功");
            } else {
                this.isShowBase = 1;
            }
        },
        //选择商品码数
        selectSize(index) {
            if (this.sizes.flag[index]) {
                this.activeClass = index;
                this.sizeChecked = 1;
                this.userSize = +this.sizes.size[index];
            }
        },
        closeSku(msg) {
            this.isShowBase = msg;
        },
        updataNum(msg) {
            this.cartNum = msg;
        }
    },
    created() {
        this.dataList = JSON.parse(localStorage.getItem("sku"));
        this.sizes = JSON.parse(localStorage.getItem("sku")).sizes;
        this.cartList = JSON.parse(localStorage.getItem("cart"));
        let numSum = 0;
        this.cartList.forEach(item => {
            numSum += item.num;
        });
        this.cartNum = numSum;
    }
};
</script>
